<template>
  <div class="main">
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <nav-logo class="nav-logo" :collapsed="collapsed"></nav-logo>
        <nav-menu @clickMenuItem="handleMenuItemClick"></nav-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header
          class="nav-header"
          style="background: #fff; padding: 0"
        >
          <nav-header></nav-header>
        </a-layout-header>

        <a-layout-content style="margin: 0 16px">
          <!-- <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>User</a-breadcrumb-item>
            <a-breadcrumb-item>Bill</a-breadcrumb-item>
          </a-breadcrumb> -->
          <nav-tab
            ref="navTabRef"
            v-model="currentMenuItemName"
            class="nav-tab"
          ></nav-tab>
          <div
            :style="{
              padding: '24px',
              background: '#fff',
              minHeight: '360px',
              margin: '7px 0'
            }"
          >
            <div>{{ cachedList }}</div>
            <template v-for="item of routes" :key="item.name">
              [{{ item.name }} - {{ item.meta.title }}]
            </template>

            <router-view v-slot="{ Component }">
              <keep-alive :include="cachedList">
                <component
                  :is="Component"
                  :key="$route.name"
                  v-if="$route.meta.keepAlive"
                ></component>
              </keep-alive>
              <component
                :is="Component"
                :key="$route.name"
                v-if="!$route.meta.keepAlive"
              ></component>
            </router-view>
          </div>
        </a-layout-content>
        <a-layout-footer>
          <nav-footer></nav-footer>
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { NavFooter, NavHeader, NavLogo, NavMenu, NavTab } from '@/components'
import { useStore } from '@/store'

export default defineComponent({
  components: { NavMenu, NavHeader, NavLogo, NavFooter, NavTab },
  setup() {
    const store = useStore()
    const navTabRef = ref<InstanceType<typeof NavTab>>()
    const cachedList = computed(() => store.state.tag.cachedList)
    const routes = computed(() => store.state.tag.routeLocations)
    const collapsed = ref(false)
    const componentName = ref('')

    const currentMenuItemName = ref('')
    const handleMenuItemClick = (data: any) => {
      console.log('导航菜单中点击的菜单项：', data)
      currentMenuItemName.value = data.name
    }

    return {
      collapsed,
      componentName,
      handleMenuItemClick,
      cachedList,
      routes,
      currentMenuItemName
    }
  }
})
</script>
<style scoped lang="less">
.nav-logo {
  padding: 10px;
}

.nav-tab {
  margin-top: 7px;
}
</style>
